<template>
    <div>
        <div class="header">
            <div class="header-top">
                <div class="container">
                    <div class="header-left">		
                            <ul>
                                <li ><a  href="javascript:void(0);" @click="routeChange('/user')">Boss</a></li>
                                <li v-if="!userInfo.money"><a  href="javascript:void(0);" @click="routeChange('/logintest')">登录</a></li>
                                <li v-if="userInfo.money"><a  href="javascript:void(0);" @click="routeChange('/logintest')">充值</a></li>
                                <li v-if="userInfo.money"><a  href="javascript:void(0);" @click="routeChange('/logintest')">投诉</a></li>        
                                <div v-if="userInfo.money" class="cart box_1">
                                    <h3> <div class="total">
                                            余额：{{userInfo.money}}</div>
                                        <img src="images/cart.png" alt=""/></h3>
                                    <p><a href="javascript:void(0);" class="simpleCart_empty">积分：{{userInfo.score}}</a></p>
                                </div>
                            </ul>
                            
                            <div class="clearfix"> </div>
                    </div>
                    
                    <div class="clearfix"> </div>
                </div>
                </div> 
                <div class="container">
                    <div class="head-top">
                        <div class=" h_menu4">
                                <ul class="memenu skyblue">
                                    <li class="active grid"><a class="color8" href="javascript:void(0);" @click="routeChange('/')">首页</a></li>	
                                    <li><a class="color1" href="javascript:void(0);" @click="routeChange('/indexProduct')">产品中心</a></li>
                                    <li class="grid"><a class="color2" href="javascript:void(0);" @click="routeChange('/indexIntegral')">积分商城</a></li>
                                    <li v-if="userInfo.money"><a class="color1" href="javascript:void(0);" @click="routeChange('/personalCenter/personIndex')">个人中心</a></li>
                                    <li v-if="userInfo.money"><a class="color1" href="javascript:void(0);" @click="routeChange('/indexProduct')">退出登录</a></li>
                                </ul> 
                        </div>   
                        <div class="clearfix"> </div>
                    </div>
                </div>
        </div>


        
        <!-- 内容区域 -->
        <div>
            <router-view></router-view>
            <div v-if="show">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <img style="width: 100%;height: 100%;" src="../../../public/top.jpg">
                    </el-carousel-item>
                </el-carousel>
        
        
                <!--content-->
                <div class="content">
                    <div class="container">
                        <div class="content-top">
                            <h1>全新产品</h1>
                            <div class="grid-in">
        
                                <div class="col-md-4 grid-top">
                                    <a href="javascript:void(0);" @click="drawer= true" class="b-link-stripe b-animate-go  thickbox">
                                        <img style="height: 250px;" class="img-responsive" src="../../../public/top.jpg" alt="">
                                        <div class="b-wrapper">
                                            <h3 class="b-animate b-from-left    b-delay03 ">
                                                <span>T-Shirt</span>	
                                            </h3>
                                        </div>
                                    </a>
                                    <p>
                                    <a href="single.html">Contrary to popular</a></p>
                                </div>
        
                                <div class="col-md-4 grid-top">
                                    <a href="javascript:void(0);" @click="drawer= true" class="b-link-stripe b-animate-go  thickbox"><img style="height: 250px;" class="img-responsive" src="../../../public/top.jpg" alt="">
                                        <div class="b-wrapper">
                                                        <h3 class="b-animate b-from-left    b-delay03 ">
                                                            <span>Shoe</span>	
                                                        </h3>
                                                    </div>
                                    </a>
                                <p><a href="single.html">classical Latin</a></p>
                                </div>
        
        
                                <div class="col-md-4 grid-top">
                                    <a href="javascript:void(0);" @click="drawer= true" class="b-link-stripe b-animate-go  thickbox"><img style="height: 250px;" class="img-responsive" src="../../../public/top.jpg" alt="">
                                        <div class="b-wrapper">
                                                        <h3 class="b-animate b-from-left    b-delay03 ">
                                                            <span>Bag</span>	
                                                        </h3>
                                                    </div>
                                    </a>
                                <p><a href="single.html">undoubtable</a></p>
                                </div>
        
                            <div class="clearfix"> </div>
                            </div>
        
                            <div class="grid-in">
                                <div class="col-md-4 grid-top">
                                    <a href="javascript:void(0);" @click="drawer= true" class="b-link-stripe b-animate-go  thickbox"><img style="height: 250px;" class="img-responsive" src="../../../public/top.jpg" alt="">
                                        <div class="b-wrapper">
                                                        <h3 class="b-animate b-from-left    b-delay03 ">
                                                            <span>Shirt</span>	
                                                        </h3>
                                                    </div>
                                    </a>
                                <p><a href="single.html">suffered alteration</a></p>
                            </div>
        
                            <div class="col-md-4 grid-top">
                                    <a href="javascript:void(0);" @click="drawer= true" class="b-link-stripe b-animate-go  thickbox"><img style="height: 250px;" class="img-responsive" src="../../../public/top.jpg" alt="">
                                        <div class="b-wrapper">
                                                        <h3 class="b-animate b-from-left    b-delay03 ">
                                                            <span>Bag</span>	
                                                        </h3>
                                                    </div>
                                    </a>
                                <p><a href="single.html">Content here</a></p>
                            </div>
        
                            <div class="col-md-4 grid-top">
                                    <a href="javascript:void(0);" @click="drawer= true" class="b-link-stripe b-animate-go  thickbox"><img style="height: 250px;" class="img-responsive" src="../../../public/top.jpg" alt="">
                                        <div class="b-wrapper">
                                                        <h3 class="b-animate b-from-left    b-delay03 ">
                                                            <span>Shoe</span>	
                                                        </h3>
                                                    </div>
                                    </a>
                                <p><a href="single.html">readable content</a></p>
                            </div>
        
                            <div class="clearfix"> </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footer">
                    <div class="container">
                        <div class="footer-top-at">
                            <div class="col-md-4 amet-sed">
                                <h4>关于我们</h4>
                                <ul class="nav-bottom">
                                    <li><a href="#">帮助中心</a></li>
                                    <li><a href="#">FAQ</a></li>
                                    <li><a href="contact.html">Location</a></li>
                                    <li><a href="#">Shipping</a></li>
                                    <li><a href="#">Membership</a></li>	
                                </ul>	
                            </div>
                        <div class="clearfix"> </div>
                        </div>
                    </div>
                    </div>
            </div>
            
        </div>
        
        <!-- 抽屉 -->
        <el-drawer
            title="购买"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose">
            <div style="padding: 10px;">
                <el-form size='mini' :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                    <div style="margin-left:20px;display: flex;flex-direction:row;margin-bottom:10px;">
                        <img src="../../../public/top.jpg" style="width:100px;height:100px">
                        <div style="width:60%;padding-left:10px;word-break:break-all;word-wrap:break-word;">商品描述：12321312312312312321312321321321312321321312</div>
                    </div>
                    <el-form-item label="价格">
                        5元
                    </el-form-item>
                    <el-form-item label="购买数量">
                        1
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <el-select v-model="ruleForm.roleName" placeholder="请选择">
                            <el-option
                            v-for="item in option"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.roleName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">购买</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
        </el-drawer>
    </div>
			 
</template>
<style>
    .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<script>
export default {
    name: 'Home',
    components: {
    },
    data() {
        //验证角色名称
        var validateLoginId = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
            }
        };
        return {
            option:[{
                    id:'1',
                    roleName:"支付宝"
                },
                {
                    id:'2',
                    roleName:"微信"
                }],
            drawer:false,
            //用户信息：
            userInfo:{
                username:""
            },
            //是否显示默认子页面
            show:true,
            //首页进来展示默认子组件
            showChild: true,
            themeColor: 'transparent',
            activeIndex: '1',
            isCollapse: false,
            // 表单数据
            ruleForm: {
                status: 2,
                loginId: '',
                loginPwd: '',
                name: '',
                phone: '',
                sex: '',
                roleName:'',
                loginPwd2:''
            },
            // 表单验证数据
            rules: {
                loginId: [
                    // 失去光标触发函数
                    { validator: validateLoginId, trigger: 'blur' }
                ],
            },
        };
    },
    created () {
        let userInfo = this.$store.state.userInfo
        console.log("首页获取到的userInfo信息:   "+userInfo)
        if(!userInfo.money){

        }else{
            this.userInfo = userInfo
        }
    },
    methods: {
        aa(){
            console.log(1111);
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        themeChange(params){
            console.log(params);
            localStorage.setItem('theme',params)
            this.themeColor=params
        },
        //首页当前页面路由跳转-----销毁默认子组件
        hiddenIndexChild(path,id){
            this.showChild = false
            // 
            this.activeIndex = id
            this.$router.push(path)
        },
        showIndex(){
            console.log(this.activeIndex);
        },
        //退出系统
        exit(){
            localStorage.clear()
            sessionStorage.clear()
            this.$router.push('/')
        },
        routeChange(path){
            console.log(this.$store.state.userInfo.username)
            if(path === '/'){
                this.show = true
                this.$router.push(path)
            }else if(path==='/user'){
                if(this.$store.state.userInfo.username){
                    this.$router.push(path)
                }else{
                    this.$con_firm("请先登录！")
                }
            }else{
                this.show = false
                this.$router.push(path)
            }

        },
        //关闭抽屉
        handleClose(done) {
            done();
        },
        headerCellStyle() {
            return "background-color:transparent;color:#000;";
        }
    }
}
</script>